<template>
    <div class="min-h-screen bg-gray-900 text-white overflow-x-hidden">
      <!-- 动态背景层 -->
      <div class="fixed inset-0 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-900/30 via-purple-900/20 to-gray-900/50"></div>
        <div class="absolute inset-0 opacity-20" style="background-image: url('');"></div>
      </div>
  
      <!-- 主内容 -->
      <div class="relative z-10">
        <!-- 导航栏 -->
        <nav class="py-4 px-6 flex justify-between items-center backdrop-blur-sm bg-gray-900/50 border-b border-gray-800">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
            <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-300">计算机协会</span>
          </div>
          
          <div class="hidden md:flex space-x-6 items-center">
            <a v-for="nav in navItems" :key="nav.name" :href="nav.link" class="hover:text-cyan-400 transition-colors flex items-center">
              <component :is="nav.icon" class="w-5 h-5 mr-1" />
              {{ nav.name }}
            </a>
          </div>
          
          <div class="flex items-center space-x-4">
            <el-button v-if="!isLoggedIn" type="primary" @click="showLogin = true" round size="small">
              登录/注册
            </el-button>
            <el-dropdown v-else>
              <div class="flex items-center space-x-2 cursor-pointer">
                <el-avatar :size="32" :src="user.avatar" />
                <span class="hidden md:inline">{{ user.name }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="navigateTo('/profile')">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="navigateTo('/messages')">站内信</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <button @click="toggleMobileMenu" class="md:hidden text-gray-400 hover:text-white">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </nav>
  
        <!-- 移动端菜单 -->
        <div v-if="mobileMenuOpen" class="md:hidden bg-gray-800/95 backdrop-blur-sm border-b border-gray-700">
          <div class="px-4 py-3 space-y-3">
            <a v-for="nav in navItems" :key="nav.name" :href="nav.link" class="block px-3 py-2 rounded hover:bg-gray-700 hover:text-cyan-400">
              <component :is="nav.icon" class="inline w-5 h-5 mr-2" />
              {{ nav.name }}
            </a>
          </div>
        </div>
  
        <!-- 主要内容区 -->
        <main>
          <!-- 英雄区域 -->
          <section class="py-20 px-6 text-center">
            <div class="max-w-4xl mx-auto">
              <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
                探索<span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">数字世界</span>的无限可能
              </h1>
              <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
                计算机协会官方平台 - 整合课程资料、竞赛日历、校园服务与开发者工具
              </p>
              <div class="flex flex-wrap justify-center gap-4">
                <el-button type="primary" size="large" @click="showLogin = isLoggedIn ? null : true">
                  {{ isLoggedIn ? '进入会员中心' : '立即加入' }}
                </el-button>
                <el-button size="large" class="bg-gray-800 hover:bg-gray-700" @click="scrollToFeatures">
                  了解更多
                </el-button>
              </div>
            </div>
          </section>
  
          <!-- 快捷服务 -->
          <section class="py-16 px-6 bg-gray-800/50 backdrop-blur-sm">
            <div class="max-w-6xl mx-auto">
              <h2 class="text-3xl font-bold text-center mb-12">
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">快捷服务</span>入口
              </h2>
              
              <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div v-for="service in quickServices" :key="service.name" 
                     class="bg-gray-900/50 hover:bg-gray-800/70 border border-gray-800 rounded-xl p-5 transition-all hover:shadow-lg hover:shadow-cyan-500/10">
                  <div class="w-12 h-12 bg-blue-900/50 rounded-lg flex items-center justify-center mb-4 text-blue-400">
                    <component :is="service.icon" class="w-6 h-6" />
                  </div>
                  <h3 class="font-bold mb-2">{{ service.name }}</h3>
                  <p class="text-gray-400 text-sm mb-4">{{ service.desc }}</p>
                  <el-button type="primary" plain size="small" @click="openService(service.link)" class="w-full">
                    立即访问
                  </el-button>
                </div>
              </div>
            </div>
          </section>
  
          <!-- 特色功能 -->
          <section id="features" class="py-16 px-6">
            <div class="max-w-6xl mx-auto">
              <h2 class="text-3xl font-bold text-center mb-12">
                平台<span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">核心功能</span>
              </h2>
              
              <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div v-for="feature in features" :key="feature.title" 
                     class="bg-gray-800/50 hover:bg-gray-700/70 border border-gray-800 rounded-xl p-6 transition-all hover:shadow-lg hover:shadow-cyan-500/10 group">
                  <div class="w-14 h-14 bg-gradient-to-br from-blue-900 to-cyan-800 rounded-xl flex items-center justify-center mb-5 text-cyan-400 group-hover:rotate-6 transition-transform">
                    <component :is="feature.icon" class="w-6 h-6" />
                  </div>
                  <h3 class="text-xl font-bold mb-3">{{ feature.title }}</h3>
                  <p class="text-gray-400">{{ feature.description }}</p>
                  <div class="mt-4">
                    <el-button type="primary" text @click="navigateTo(feature.link)">
                      了解更多 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                      </svg>
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </section>
  
          <!-- 动态日历预览 -->
          <section class="py-16 px-6 bg-gray-800/50 backdrop-blur-sm">
            <div class="max-w-6xl mx-auto">
              <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
                  <h2 class="text-3xl font-bold mb-6">
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">智能日历</span>系统
                  </h2>
                  <p class="text-gray-300 mb-6">
                    整合竞赛日程、课程安排和个人事务，一站式管理您的时间。支持多种视图切换，自动同步教务系统数据。
                  </p>
                  <ul class="space-y-3">
                    <li v-for="item in calendarFeatures" :key="item" class="flex items-start">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-cyan-400 mt-0.5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                      <span>{{ item }}</span>
                    </li>
                  </ul>
                  <el-button type="primary" class="mt-6" @click="navigateTo('/calendar')">
                    查看完整日历
                  </el-button>
                </div>
                
                <div class="lg:w-1/2 bg-gray-900/80 border border-gray-800 rounded-xl overflow-hidden shadow-xl">
                  <div class="p-4 bg-gray-800 border-b border-gray-700 flex justify-between items-center">
                    <div class="flex space-x-2">
                      <button v-for="view in ['日', '周', '月']" :key="view" 
                              class="px-3 py-1 text-sm rounded hover:bg-gray-700"
                              :class="{ 'bg-blue-900/50 text-blue-400': currentView === view }">
                        {{ view }}视图
                      </button>
                    </div>
                    <span class="text-sm text-gray-400">{{ currentMonth }}</span>
                  </div>
                  
                  <!-- 日历迷你视图 -->
                  <div class="p-4">
                    <div class="grid grid-cols-7 gap-1 mb-2">
                      <div v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day" class="text-center text-sm text-gray-400 py-1">
                        {{ day }}
                      </div>
                    </div>
                    
                    <div class="grid grid-cols-7 gap-1">
                      <div v-for="day in calendarDays" :key="day.date" 
                           class="aspect-square p-1 text-sm"
                           :class="{
                             'text-gray-600': !day.isCurrentMonth,
                             'bg-blue-900/20': day.isToday,
                             'border border-blue-500/50': day.hasEvent
                           }">
                        <div class="h-full flex flex-col">
                          <span class="text-right">{{ day.day }}</span>
                          <template v-if="day.events.length > 0">
                            <div v-for="event in day.events.slice(0,1)" :key="event.id" 
                                 class="text-xs mt-1 p-1 rounded truncate"
                                 :class="{
                                   'bg-blue-900/50': event.type === 'course',
                                   'bg-purple-900/50': event.type === 'competition',
                                   'bg-cyan-900/50': event.type === 'personal'
                                 }">
                              {{ event.title }}
                            </div>
                            <div v-if="day.events.length > 1" class="text-xs text-center text-gray-400 mt-1">
                              +{{ day.events.length - 1 }}更多
                            </div>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 待办事项 -->
                  <div class="border-t border-gray-800 p-4">
                    <h4 class="font-bold mb-3 flex items-center">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                      </svg>
                      近期待办
                    </h4>
                    <div v-if="todos.length > 0" class="space-y-3">
                      <div v-for="todo in todos.slice(0,4)" :key="todo.id" class="flex items-start">
                        <el-checkbox v-model="todo.completed" class="mr-2 mt-1" />
                        <div class="flex-1">
                          <div class="text-sm" :class="{ 'line-through text-gray-500': todo.completed }">{{ todo.title }}</div>
                          <div class="text-xs text-gray-400">{{ todo.date }}</div>
                        </div>
                      </div>
                    </div>
                    <div v-else class="text-center text-gray-500 py-4 text-sm">
                      暂无待办事项
                    </div>
                    <el-button type="text" class="w-full mt-2" @click="navigateTo('/calendar')">
                      查看全部
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </section>
  
          <!-- 课程资料库 -->
          <section class="py-16 px-6">
            <div class="max-w-6xl mx-auto">
              <h2 class="text-3xl font-bold text-center mb-12">
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">课程资料库</span>
              </h2>
              
              <div class="grid md:grid-cols-2 gap-8 mb-10">
                <div v-for="course in featuredCourses" :key="course.id" 
                     class="bg-gray-800/50 hover:bg-gray-700/70 border border-gray-800 rounded-xl overflow-hidden transition-all hover:shadow-lg hover:shadow-cyan-500/10">
                  <div class="p-5 border-b border-gray-800">
                    <h3 class="text-xl font-bold mb-2">{{ course.name }}</h3>
                    <div class="flex items-center text-sm text-gray-400 mb-3">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                      </svg>
                      {{ course.teacher }}
                    </div>
                    <p class="text-gray-300 text-sm line-clamp-2">{{ course.description }}</p>
                  </div>
                  <div class="p-5 bg-gray-900/30">
                    <div class="flex justify-between items-center">
                      <div class="text-sm text-gray-400">
                        <span class="text-cyan-400">{{ course.materials }}</span> 份资料
                      </div>
                      <el-button type="primary" size="small" @click="navigateTo(`/courses/${course.id}`)">
                        查看课程
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="text-center">
                <el-button type="primary" plain @click="navigateTo('/courses')">
                  浏览全部课程 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                  </svg>
                </el-button>
              </div>
            </div>
          </section>
        </main>
  
        <!-- 页脚 -->
        <footer class="py-12 px-6 bg-gray-900/80 border-t border-gray-800">
          <div class="max-w-6xl mx-auto">
            <div class="grid md:grid-cols-4 gap-8 mb-8">
              <div>
                <h3 class="text-lg font-bold mb-4 flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  计算机协会
                </h3>
                <p class="text-gray-400 text-sm">
                  致力于推动计算机技术的学习与创新，为会员提供优质的学习资源和交流平台。
                </p>
              </div>
              
              <div v-for="group in footerLinks" :key="group.title">
                <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">{{ group.title }}</h4>
                <ul class="space-y-2">
                  <li v-for="link in group.links" :key="link.name">
                    <a :href="link.url" class="text-gray-400 hover:text-cyan-400 text-sm transition-colors">{{ link.name }}</a>
                  </li>
                </ul>
              </div>
            </div>
            
            <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
              <p class="text-gray-500 text-sm mb-4 md:mb-0">
                © 2023 计算机协会. 保留所有权利.
              </p>
              <div class="flex space-x-6">
                <a v-for="social in socialLinks" :key="social.name" :href="social.url" class="text-gray-400 hover:text-cyan-400">
                  <component :is="social.icon" class="h-5 w-5" />
                </a>
              </div>
            </div>
          </div>
        </footer>
      </div>
  
      <!-- 登录弹窗 -->
      <el-dialog v-model="showLogin" title="会员登录" width="90%" :fullscreen="isMobile" class="max-w-md">
        <div class="p-6">
          <div class="text-center mb-6">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-800">计算机协会会员系统</h3>
            <p class="text-gray-600 mt-1">请输入您的账号信息</p>
          </div>
  
          <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="用户名/邮箱" size="large" :prefix-icon="User" />
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" placeholder="密码" show-password size="large" :prefix-icon="Lock" />
            </el-form-item>
            
            <div class="flex justify-between items-center mb-6">
              <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
              <el-link type="primary" :underline="false">忘记密码?</el-link>
            </div>
            
            <el-button type="primary" size="large" class="w-full" @click="submitLogin" :loading="loginLoading">登录</el-button>
          </el-form>
  
          <div class="mt-6 text-center text-sm">
            <span class="text-gray-600">还没有账号?</span>
            <el-link type="primary" class="ml-1" :underline="false">立即注册</el-link>
          </div>
          
          <div class="relative my-6">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-200"></div>
            </div>
            <div class="relative flex justify-center">
              <span class="px-2 bg-white text-gray-500 text-sm">其他登录方式</span>
            </div>
          </div>
          
          <div class="flex justify-center space-x-4">
            <el-button v-for="(method, index) in loginMethods" :key="index" 
                       circle size="large" class="w-12 h-12">
              <component :is="method.icon" class="h-5 w-5" :class="method.color" />
            </el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue'
  import { 
    User, Lock, Home, Calendar, BookOpen, Mail, Award, 
    Github, Twitter, Facebook, Linkedin, ClipboardList,
    Clock, FileText, Database, Code, School, Settings,
    MessageSquare, Download, Upload, AlertCircle, Bookmark
  } from 'lucide-vue-next'
  
  // 用户状态
  const isLoggedIn = ref(false)
  const user = ref({
    name: '张三',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  })
  
  // 移动端菜单
  const mobileMenuOpen = ref(false)
  const toggleMobileMenu = () => {
    mobileMenuOpen.value = !mobileMenuOpen.value
  }
  
  // 导航项
  const navItems = [
    { name: '首页', link: '/', icon: Home },
    { name: '日历', link: '/calendar', icon: Calendar },
    { name: '课程资料', link: '/courses', icon: BookOpen },
    { name: '竞赛信息', link: '/competitions', icon: Award },
    { name: '站内信', link: '/messages', icon: Mail }
  ]
  
  // 快捷服务
  const quickServices = [
    { name: '教务系统', desc: '课程成绩查询与选课', icon: School, link: '#' },
    { name: 'DeepSeek AI', desc: '智能编程助手', icon: Code, link: '#' },
    { name: 'Gitee/GitHub', desc: '代码托管平台', icon: Github, link: '#' },
    { name: 'CodeServer', desc: '在线开发环境', icon: Settings, link: '#' }
  ]
  
  // 特色功能
  const features = [
    {
      title: '智能日历系统',
      description: '整合课程、竞赛和个人事务，支持多种视图切换，自动同步教务数据。',
      icon: Calendar,
      link: '/calendar'
    },
    {
      title: '课程资料库',
      description: '丰富的计算机课程学习资源，支持资料上传下载和Markdown展示。',
      icon: BookOpen,
      link: '/courses'
    },
    {
      title: '竞赛信息平台',
      description: '最新竞赛资讯、报名通道和成绩查询，支持竞赛信息提交。',
      icon: Award,
      link: '/competitions'
    },
    {
      title: '站内信系统',
      description: '会员间私信交流，管理员公告推送，支持附件发送。',
      icon: Mail,
      link: '/messages'
    },
    {
      title: '资源分享中心',
      description: '开放的学习资源共享平台，支持Markdown和文件上传。',
      icon: Database,
      link: '/resources'
    },
    {
      title: '成绩课表查询',
      description: '一键查询教务系统中的成绩和课表信息。',
      icon: ClipboardList,
      link: '/grades'
    }
  ]
  
  // 日历功能
  const calendarFeatures = [
    '三种视图模式：课程表、竞赛日历、事务日历',
    '自动同步教务系统数据',
    '支持手动添加个人日程',
    '竞赛信息提交与审核',
    '待办事项提醒功能'
  ]
  
  // 当前日历视图
  const currentView = ref('月')
  const currentMonth = computed(() => {
    const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    const now = new Date()
    return `${months[now.getMonth()]} ${now.getFullYear()}`
  })
  
  // 生成日历天数
  const calendarDays = computed(() => {
    const days = []
    const now = new Date()
    const year = now.getFullYear()
    const month = now.getMonth()
    
    // 获取当月第一天是星期几
    const firstDay = new Date(year, month, 1).getDay()
    
    // 获取上个月最后几天
    const prevMonthLastDay = new Date(year, month, 0).getDate()
    
    // 获取当月天数
    const currentMonthDays = new Date(year, month + 1, 0).getDate()
    
    // 获取下个月前几天
    const nextMonthDays = 42 - (firstDay + currentMonthDays)
    
    // 添加上个月最后几天
    for (let i = firstDay - 1; i >= 0; i--) {
      days.push({
        day: prevMonthLastDay - i,
        date: `${year}-${month}-${prevMonthLastDay - i}`,
        isCurrentMonth: false,
        isToday: false,
        hasEvent: false,
        events: []
      })
    }
    
    // 添加当月天数
    const today = new Date().getDate()
    for (let i = 1; i <= currentMonthDays; i++) {
      const hasEvent = Math.random() > 0.7
      const events = hasEvent ? generateEvents(i) : []
      
      days.push({
        day: i,
        date: `${year}-${month + 1}-${i}`,
        isCurrentMonth: true,
        isToday: i === today,
        hasEvent,
        events
      })
    }
    
    // 添加下个月前几天
    for (let i = 1; i <= nextMonthDays; i++) {
      days.push({
        day: i,
        date: `${year}-${month + 2}-${i}`,
        isCurrentMonth: false,
        isToday: false,
        hasEvent: false,
        events: []
      })
    }
    
    return days.slice(0, 42) // 确保只有6周
  })
  
  function generateEvents(day: number) {
    const types = ['course', 'competition', 'personal']
    const titles = [
      '数据结构课程',
      '算法竞赛报名',
      '小组会议',
      '项目截止',
      '期中考试',
      '黑客马拉松'
    ]
    
    const count = Math.floor(Math.random() * 3) + 1
    const events = []
    
    for (let i = 0; i < count; i++) {
      events.push({
        id: `${day}-${i}`,
        type: types[Math.floor(Math.random() * types.length)],
        title: titles[Math.floor(Math.random() * titles.length)]
      })
    }
    
    return events
  }
  
  // 待办事项
  const todos = ref([
    { id: 1, title: '完成数据结构作业', date: '今天 18:00', completed: false },
    { id: 2, title: '准备算法竞赛', date: '明天 09:00', completed: false },
    { id: 3, title: '小组项目会议', date: '周五 14:30', completed: true },
    { id: 4, title: '提交课程设计', date: '下周一 23:59', completed: false }
  ])
  
  // 特色课程
  const featuredCourses = ref([
    {
      id: 1,
      name: '数据结构与算法',
      teacher: '李教授',
      description: '本课程介绍基本数据结构和经典算法，包括线性表、树、图等结构，以及排序、查找等算法。',
      materials: 24
    },
    {
      id: 2,
      name: '操作系统原理',
      teacher: '王教授',
      description: '深入讲解操作系统核心概念，包括进程管理、内存管理、文件系统等。',
      materials: 18
    },
    {
      id: 3,
      name: '计算机网络',
      teacher: '张教授',
      description: '从底层协议到应用层，全面介绍计算机网络体系结构和工作原理。',
      materials: 15
    },
    {
      id: 4,
      name: '数据库系统',
      teacher: '赵教授',
      description: '关系数据库理论、SQL语言、数据库设计与优化等内容。',
      materials: 21
    }
  ])
  
  // 页脚链接
  const footerLinks = [
    {
      title: '资源',
      links: [
        { name: '课程资料库', url: '/courses' },
        { name: '学习平台', url: '/platforms' },
        { name: '开发工具', url: '/tools' },
        { name: '竞赛资源', url: '/competitions' }
      ]
    },
    {
      title: '帮助',
      links: [
        { name: '常见问题', url: '/faq' },
        { name: '使用指南', url: '/guide' },
        { name: '联系我们', url: '/contact' },
        { name: '反馈建议', url: '/feedback' }
      ]
    },
    {
      title: '关于',
      links: [
        { name: '协会介绍', url: '/about' },
        { name: '组织架构', url: '/structure' },
        { name: '加入我们', url: '/join' },
        { name: '隐私政策', url: '/privacy' }
      ]
    }
  ]
  
  // 社交媒体链接
  const socialLinks = [
    { name: 'GitHub', url: '#', icon: Github },
    { name: 'Twitter', url: '#', icon: Twitter },
    { name: 'Facebook', url: '#', icon: Facebook },
    { name: 'LinkedIn', url: '#', icon: Linkedin }
  ]
  
  // 登录相关
  const showLogin = ref(false)
  const loginLoading = ref(false)
  const loginFormRef = ref()
  const loginForm = ref({
    username: '',
    password: '',
    remember: false
  })
  
  const loginRules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
    ]
  }
  
  const loginMethods = [
    { icon: Github, color: 'text-gray-800' },
    { icon: Twitter, color: 'text-blue-400' },
    { icon: Facebook, color: 'text-blue-600' }
  ]
  
  // 方法
  const scrollToFeatures = () => {
    const el = document.getElementById('features')
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' })
    }
  }
  
  const openService = (url: string) => {
    window.open(url, '_blank')
  }
  
  const navigateTo = (path: string) => {
    // 实际项目中应该使用路由跳转
    console.log('导航到:', path)
    if (path === '/messages') {
      isLoggedIn.value = true
    }
    showLogin.value = false
  }
  
  const submitLogin = () => {
    loginFormRef.value.validate((valid: boolean) => {
      if (valid) {
        loginLoading.value = true
        // 模拟登录请求
        setTimeout(() => {
          loginLoading.value = false
          isLoggedIn.value = true
          showLogin.value = false
        }, 1500)
      }
    })
  }
  
  const logout = () => {
    isLoggedIn.value = false
  }
  </script>
  
  <style>
  /* 自定义滚动条 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #1a202c;
  }
  ::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #2d3748;
  }
  
  /* 全局过渡效果 */
  .page-enter-active,
  .page-leave-active {
    transition: all 0.3s ease;
  }
  .page-enter-from,
  .page-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
  
  /* 卡片悬停效果 */
  .card-hover {
    transition: all 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
  }
  </style>